<template>

    <div>
        <div>
            <el-row>
                <p style="line-height: 28px;" class="font-xm">用户数据统计</p>



                <div style="margin-bottom: 1rem;margin-left: 40px;" class="select_text">
                    <span v-if="false" class="spanm_m">系统：</span>
                    <el-select-v2 v-if="false" :options="AllSYS" v-model="selectSYs" placeholder="请选择系统" collapse-tags>

                    </el-select-v2>

                </div>

            </el-row>

        </div>
        <div class="md:flex">
            <div class="flex_header">
                <div class="flex_item_box">
                    <img src="../../common/image/z1.png" alt="">

                    <div class="p_total">
                        <p class="p_num zi">{{ userData.totalNum || 0 }}</p>
                        <p class="p_text">累计用户数</p>
                    </div>
                </div>


                <div class="flex_item_box">
                    <img src="../../common/image/z2.png" alt="">

                    <div class="p_total">
                        <p class="p_num fen">{{ userData.addNum || 0 }}</p>
                        <p class="p_text">新增用户数</p>
                    </div>
                </div>


                <div class="flex_item_box">
                    <img src="../../common/image/z3.png" alt="">

                    <div class="p_total">
                        <p class="p_num lan">{{ userData.activeNum || 0 }}</p>
                        <p class="p_text">活跃用户数</p>
                    </div>
                </div>

                <div class="flex_item_box">
                    <img src="../../common/image/z1.png" alt="">

                    <div class="p_total">
                        <p class="p_num zi">{{ userData.totalAccessCount || 0 }}</p>
                        <p class="p_text">访问总次数</p>
                    </div>
                </div>


                <div class="flex_item_box">
                    <img src="../../common/image/z2.png" alt="">

                    <div class="p_total">
                        <p class="p_num fen">{{ userData.totalAccessDuration || 0 }}</p>
                        <p class="p_text">总时长(min)</p>
                    </div>
                </div>

            </div>



        </div>


        <div class="table_content">
            <div class="header_top_title">
                <div class="p_title">{{ selectSYs }} - 系统数据</div>

            </div>
            <div class="table_echarts">
                <contractEcharts style="height: 400px;width: 99.8%;" id="echarts4" :data="echartsData_4">
                </contractEcharts>
            </div>


            <transition name="slide-left" mode="out-in" appear>
                <div style="margin-bottom: 20px;" class="table_totle">


                    <el-table ref="FatherDataRef" max-height="400px" :data="TableDataStaVi" class="roledata"
                        highlight-current-row :header-cell-style="{ background: '#fafbfc', color: '#333333' }">
                        <el-table-column type="index" width="80" label="序号" align="center" />

                        <el-table-column prop="modeName" label="模块名称"></el-table-column>



                        <el-table-column prop="visitTime" label="访问总时长(min)">

                        </el-table-column>

                        <el-table-column prop="times" label="访问总次数">

                        </el-table-column>

                    </el-table>


                    <div class="seciton_page">
                        <el-pagination v-model:current-page="pageNumVi" v-model:page-size="pageSizeVi"
                            :page-sizes="[20, 30, 50]" background layout="total, sizes, prev, pager, next"
                            :total="totalVi" @size-change="handleSizeChangeVi"
                            @current-change="handleCurrentChangeVi" />
                    </div>
                </div>
            </transition>


            <div style="margin-bottom: 20px;" class="header_top_title">
                <div class="p_title">{{ selectMode }} - 模块数据</div>

            </div>

            <div class="time_header">
                <div class="totl_flex">
                    <div class="timer_iunput">
                        <span>时间：</span>
                        <el-date-picker :disabled="selectMode ? false : true" value-format="YYYY-MM-DD"
                            v-model="statisticsDate" type="datetimerange" range-separator=" - " start-placeholder="开始日期"
                            end-placeholder="结束日期" />
                    </div>


                    <div v-if='false' class="grounps">
                        <el-radio-group :disabled="selectMode ? false : true" v-model="radioDate" class="ml-4">
                            <!-- <el-radio label="今天" >今天</el-radio>
      <el-radio label="昨天" >昨天</el-radio> -->
                            <el-radio label="7天">7天</el-radio>
                            <el-radio label="14天">14天</el-radio>
                            <el-radio label="30天">30天</el-radio>
                        </el-radio-group>
                    </div>
                </div>

                <div class="select_text">
                    <!-- <span class="spanm_m">系统：</span>
   <el-select-v2
   :options="AllSYS"
            v-model="selectSYs"
            placeholder="请选择系统"
            collapse-tags
   >

   </el-select-v2> -->

                    <span v-if="selectSYs" class="spanm_m">模块：</span>
                    <el-select-v2 filterable v-if="selectSYs" :options="AllMode" v-model="selectMode"
                        placeholder="请选择模块" collapse-tags>

                    </el-select-v2>
                </div>

            </div>

            <div class="header_top_title">
                <div class="p_title">趋势图</div>


                <div class="titl_select">
                    <div @click="clickSelect(item, TL)" :class="item.active ? 'active' : ''" v-for="(item, index) in TL"
                        :key="index" class="title_itme">{{ item.title }}</div>
                </div>
            </div>


            <div v-if="showChange" class="echart_table">

                <contractEcharts :dataZoom='true' style="height: 400px;width: 100%;" id="echarts1" :data="echartsData_1">
                </contractEcharts>

            </div>

            <div v-if="!showChange" class="echart_table">

                <contractEcharts :dataZoom='true' style="height: 400px;width: 100%;" id="echarts2" :data="echartsData_2">
                </contractEcharts>

            </div>

            <!-- <div class="table_swich">

  <div @click="swichTRable(item)" v-for="(item,index) in dataSwich" :key="index" :class="item.active?'activeButoon': ''" class="button">{{ item.title }}</div>
  
</div> -->



            <transition name="slide-left" mode="out-in" appear>
                <div v-if="selectMode" class="table_totle">


                    <el-table ref="FatherDataRef" max-height="400px" :data="TableDataSta" class="roledata"
                        highlight-current-row :header-cell-style="{ background: '#fafbfc', color: '#333333' }">
                        <el-table-column type="index" width="80" label="序号" align="center" />

                        <el-table-column prop="date" label="日期">

                        </el-table-column>

                        <el-table-column prop="username" label="用户名" column-key="roleType">


                        </el-table-column>
                        <!-- <el-table-column prop="realName" label="姓名">
 
           </el-table-column> -->

                        <el-table-column prop="stay" label="停留时长(min)">

                        </el-table-column>

                        <el-table-column prop="visit" label="访问次数">

                        </el-table-column>

                    </el-table>


                    <div class="seciton_page">
                        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize"
                            :page-sizes="[20, 100, 200]" background layout="total, sizes, prev, pager, next"
                            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>
            </transition>






        </div>
        <!-- </Card> -->
    </div>
</template>
<script setup>
    import contractEcharts from './compontents/echarts.vue'
    import { queryEcharts1, queryEcharts2, querySYS, queryMode, queryTable, userNum, modeDetail } from "/@/api/statistics";

    // import { groupItems, groupItemstwo } from '.././utils/data'
    import { Search } from "@element-plus/icons-vue";
    import { ref, onMounted, watch } from "vue";
    import { ElMessage } from 'element-plus';


    let showMode = ref(true)
    let swichTRable = (item) => {
        dataSwich.value.forEach(v => {
            v.active = false
        })
        item.active = true;
        if (item.title == '详细数据') {
            showMode.value = true
        } else {
            showMode.value = false
        }
    }

    let dataSwich = ref([
        {
            title: '详细数据',
            active: true,
        },
        {
            title: '模块数据',
            active: false,
        },

    ])

    let handleCurrentChange = (val) => {
        pageNum.value = val
        GetTableDataSta({
            "pageNum": pageNum.value,

            "pageSize": pageSize.value,

            "sysName": selectSYs.value, //系统名称
            "moduleName": selectMode.value, //模块名称
            "startDate": statisticsDate.value[0],

            "endDate": statisticsDate.value[1]
        })
    }

    let handleSizeChange = (val) => {
        pageSize.value = val
        GetTableDataSta({
            "pageNum": pageNum.value,

            "pageSize": pageSize.value,

            "sysName": selectSYs.value, //系统名称
            "moduleName": selectMode.value, //模块名称
            "startDate": statisticsDate.value[0],

            "endDate": statisticsDate.value[1]
        })
    }



    let pageNumVi = ref(1)
    let handleCurrentChangeVi = (val) => {
        pageNum.value = val
        GetTableDataStaVi({
            "pageNum": pageNumVi.value,

            "pageSize": pageSizeVi.value,
            "sysName": selectSYs.value, //系统名称

        })
    }


    let pageSizeVi = ref(20)
    let handleSizeChangeVi = (val) => {
        pageSize.value = val
        GetTableDataStaVi({
            "pageNum": pageNumVi.value,

            "pageSize": pageSizeVi.value,

            "sysName": selectSYs.value, //系统名称

        })
    }


    let total = ref(0)
    let pageNum = ref(1)
    let pageSize = ref(20)
    let GetTableDataSta = async (data) => {
        let res = await queryTable(data)
        if (res.code == 200) {
            res.data.forEach(v => {
                if(v.stay == 0){
                    v.stay = v.visit
                }
            })
           
            TableDataSta.value = res.data
          
            total.value = res.total
        }
    }

    let disablesDate = (time) => {
        const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 0
        // const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 29 
        return time.getTime() > _minTime

    }


    let totalVi = ref(0)

    let GetTableDataStaVi = async (data) => {
        let res = await modeDetail(data)
        if (res.code == 200) {
            TableDataStaVi.value = res.data
            totalVi.value = res.total

            echartsData_4.value.xAxis.data = res.data.map(v => v.modeName)
            echartsData_4.value.series[0].data = res.data.map(v => parseInt(v.times))
            echartsData_4.value.series[1].data = res.data.map(v => parseInt(v.visitTime))
        }
    }


    let TableDataStaVi = ref([])

    let TableDataSta = ref([])


    let echartsData_4 = ref({
        grid: {
            left: '3%',
            right: '3%',
            bottom: '0%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            formatter: '{b0}({a0}): {c0}次 <br />{b1}({a1}): {c1}min'
        },
        legend: {
            data: ['次数', '时间']
        },
        xAxis: {
            axisLabel: {
                inside: false,
                rotate: 30,

            },
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: [{
            type: 'value',
            name: '次数',
            show: true,
            // interval: 10,
            axisLine: {
                lineStyle: {
                    color: '#5e859e',
                    width: 2
                }
            }
        }, {
            type: 'value',
            name: '时间',
            min: 0,
            max: 1500,
            // interval: 10,
            axisLabel: {
                formatter: '{value} 分钟'
            },
            axisLine: {
                lineStyle: {
                    color: '#5e859e',//纵坐标轴和字体颜色
                    width: 2
                }
            }
        }],
        series: [{
            color: 'rgba(40,197,238, .7)',
            name: '次数',
            type: 'bar',
            barWidth: '50%',
            data: [5, 20, 36, 10, 10, 20]
        }, {
            color: '#6134ff',
            name: '时间',
            type: 'line',
            smooth: true,
            data: [15, 30, 46, 20, 20, 222,]
        }]
    })



    let echartsData_1 = ref({
        dataZoom: [
   
    {
      type: 'inside',
      realtime: true,
      start: 0,
      end: 100,
      xAxisIndex: [0, 1]
    }
  ],
        grid: {
            left: '3%',
            right: '3%',
            bottom: '0%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            formatter: (params) => {
                return `
       ${params[0].axisValueLabel}
       <br/>
       ${params[0].data}次`
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['暂无数据']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {

                itemStyle: {
                    normal: {
                        color: "rgba(40,197,238, 1)", //改变折线点的颜色
                        lineStyle: {
                            color: 'rgba(40,197,238, 1)' //改变折线颜色
                        }
                    }
                },
                stack: 'Total',
                emphasis: {
                    focus: 'series'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(40,197,238, 1)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(22,100,155,  0.5)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }

                },
                data: [],
                type: 'line',
                smooth: true
            }
        ]
    })




    let echartsData_2 = ref({
        dataZoom: [
   
   {
     type: 'inside',
     realtime: true,
     start: 0,
     end: 100,
     xAxisIndex: [0, 1]
   }
 ],
        grid: {
            left: '3%',
            right: '3%',
            bottom: '0%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            formatter: (params) => {
                return `
       ${params[0].axisValueLabel}
       <br/>
       ${params[0].data}分钟`
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['暂无数据']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {

                itemStyle: {
                    normal: {
                        color: "rgba(233,108,145, 1)", //改变折线点的颜色
                        lineStyle: {
                            color: 'rgba(233,108,145, 1)' //改变折线颜色
                        }
                    }
                },
                stack: 'Total',
                emphasis: {
                    focus: 'series'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(233,108,145, 1)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(246,193,208,  0.5)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }

                },
                data: [],
                type: 'line',
                smooth: true
            }
        ]
    })



    let TL = ref([
        {
            title: '访问次数',
            active: true,
        },
        {
            title: '停留时长',
            active: false,
        },
    ])

    let showChange = ref(true)

    let clickSelect = (item, data) => {
        data.forEach(element => {
            element.active = false
        });
        showChange.value = !showChange.value
        item.active = true
    }

    let AllSYS = ref([])
    let selectSYs = ref(null)

    let statisticsDate = ref(null)

    watch(statisticsDate, () => {
      
        getCheckEchatrs1({
                "sysName": selectSYs.value, //系统名称
                "moduleName": selectMode.value, //模块名称
                "startDate": statisticsDate.value[0],

                "endDate": statisticsDate.value[1]
            })
            getCheckEchatrs2({
                "sysName": selectSYs.value, //系统名称
                "moduleName": selectMode.value, //模块名称
                "startDate": statisticsDate.value[0],

                "endDate": statisticsDate.value[1]
            })
            GetTableDataSta({
                "pageNum": pageNum.value,

                "pageSize": pageSize.value,

                "sysName": selectSYs.value, //系统名称
                "moduleName": selectMode.value, //模块名称
                "startDate": statisticsDate.value[0],

                "endDate": statisticsDate.value[1]
            })
            getUerNum({
                "sysName": selectSYs.value, //系统名称
            })



    })


    let radioDate = ref('30天')
    watch([radioDate], () => {
        let today = new Date();
        let todayStr = formatDate(today);
        if (radioDate.value === '今天') {

            statisticsDate.value = [todayStr, todayStr]

        }
        if (radioDate.value === '昨天') {
            let yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
            let yesterdayStr = formatDate(yesterday);
            statisticsDate.value = [yesterdayStr, todayStr]
        }
        if (radioDate.value === '7天') {
            let sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
            let sevenDaysAgoStr = formatDate(sevenDaysAgo);
            statisticsDate.value = [sevenDaysAgoStr, todayStr]

        }
        if (radioDate.value === '14天') {
            let sevenDaysAgo = new Date(today.getTime() - 14 * 24 * 60 * 60 * 1000);
            let sevenDaysAgoStr = formatDate(sevenDaysAgo);
            statisticsDate.value = [sevenDaysAgoStr, todayStr]

        }
        if (radioDate.value === '30天') {
            let sevenDaysAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
            let sevenDaysAgoStr = formatDate(sevenDaysAgo);
            statisticsDate.value = [sevenDaysAgoStr, todayStr]

        }

    }, { immediate: true })



    // 格式化日期函数
    function formatDate(date) {
        let year = date.getFullYear();
        let month = padZero(date.getMonth() + 1);
        let day = padZero(date.getDate());
        return `${year}-${month}-${day}`;
    }

    // 补零函数，用于将小于10的数字补成两位数
    function padZero(num) {
        return num < 10 ? '0' + num : num;
    }

    let AllMode = ref([])

    let selectMode = ref(null)


    let getCheckEchatrs1 = async (data) => {
        let res = await queryEcharts1(data)
        echartsData_1.value.xAxis.data = res.data.map(v => v.time)
        echartsData_1.value.series[0].data = res.data.map(v => v.data)
    }


    let getCheckEchatrs2 = async (data) => {
        let res = await queryEcharts2(data)
        echartsData_2.value.xAxis.data = res.data.map(v => v.time)
        echartsData_2.value.series[0].data = res.data.map(v => v.data)
    }


    let getMode = async (data) => {
        let res = await queryMode(data)
        AllMode.value = res.data.map(v => {
            return {
                value: v.value,
                label: v.label
            }
        })
    }

    let getSys = async (data) => {
        let res = await querySYS(data)
        res.data = res.data.filter(v => v.value === '化工设备数字化设计工作平台')
        AllSYS.value = res.data.map(v => {
            return {
                value: v.value,
                label: v.label
            }
        })
        selectSYs.value = AllSYS.value[0].value
    }


    watch(selectSYs, () => {
        getMode({
            "sysName": selectSYs.value, //系统名称
        })
        getUerNum({
            "sysName": selectSYs.value, //系统名称
        })
        GetTableDataStaVi({
            "sysName": selectSYs.value, //系统名称
            "pageNum": pageNumVi.value,

            "pageSize": pageSizeVi.value,
        })
        if (selectMode.value && statisticsDate.value) {
            getCheckEchatrs1({
                "sysName": selectSYs.value, //系统名称
                "moduleName": selectMode.value, //模块名称
                "startDate": statisticsDate.value[0],

                "endDate": statisticsDate.value[1]
            })
            getCheckEchatrs2({
                "sysName": selectSYs.value, //系统名称
                "moduleName": selectMode.value, //模块名称
                "startDate": statisticsDate.value[0],

                "endDate": statisticsDate.value[1]
            })
            GetTableDataSta({
                "pageNum": pageNum.value,

                "pageSize": pageSize.value,

                "sysName": selectSYs.value, //系统名称
                "moduleName": selectMode.value, //模块名称
                "startDate": statisticsDate.value[0],

                "endDate": statisticsDate.value[1]
            })

            getUerNum({
                "sysName": selectSYs.value, //系统名称

            })
        }
    })

    watch(selectMode, () => {
        if (statisticsDate.value) {
            getCheckEchatrs1({
                "sysName": selectSYs.value, //系统名称
                "moduleName": selectMode.value, //模块名称
                "startDate": statisticsDate.value[0],

                "endDate": statisticsDate.value[1]
            })
            getCheckEchatrs2({
                "sysName": selectSYs.value, //系统名称
                "moduleName": selectMode.value, //模块名称
                "startDate": statisticsDate.value[0],

                "endDate": statisticsDate.value[1]
            })
            GetTableDataSta({
                "pageNum": pageNum.value,

                "pageSize": pageSize.value,

                "sysName": selectSYs.value, //系统名称
                "moduleName": selectMode.value, //模块名称
                "startDate": statisticsDate.value[0],

                "endDate": statisticsDate.value[1]
            })



        }

    })


    let userData = ref({})
    let getUerNum = async (data) => {
        let res = await userNum(data)
        userData.value = {
            ...res.data
        }
    }

    onMounted(() => {
        getSys({})

    });
</script>
<style scoped lang="scss">
    .table_echarts {
        margin-bottom: 20px;
    }

    .slide-left-enter-from {
        transform: translateX(-20px);
        opacity: 0;
    }

    .slide-left-enter-to {
        transform: translateX(0px);
    }

    .slide-left-leave-from {
        transform: translateX(0);
    }

    .slide-left-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }

    .slide-left-enter-active {
        transition: all 0.6s;
    }

    .st {
        font-weight: bold;
        font-size: 14px;
        left: 0;
        top: 50%;
        position: relative;
        padding: 15px 20px;
        background: #fef0f0;
    }

    .table_swich {
        margin: 20px 0;
        display: flex;
        align-items: center;

        .button {
            margin-right: 10px;
            border-radius: 5px;
            font-size: 14px;
            background: #eee;
            padding: 8px 20px;
            box-shadow: 0px 6px 20px rgba(25, 25, 26, 0.06), 0px 2px 12px rgba(25, 25, 26, 0.04);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .activeButoon {
            transition: .3s;
            background: #22abf9;
            color: white;
        }

    }

    .seciton_page {

        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }

    .table_totle {
        margin-top: 20px;
    }

    .header_top_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;

        .titl_select {
            display: flex;
            align-items: center;
            background: #eee;
            padding: 5px;

            .title_itme {
                padding: 5px 10px;
                font-size: 14px;


            }

            .active {
                background: white;
                transition: all .3s ease;
            }
        }

        .p_title {
            padding-left: 17px;
            position: relative;
            font-weight: bold;
            font-size: 20px;

            &::after {
                position: absolute;
                content: " ";
                left: 0;
                height: 100%;
                width: 8px;
                background: #22abf9;

            }
        }
    }

    .totl_flex {
        display: flex;
        align-items: center;
    }

    .grounps {
        margin-left: 20px;
    }

    .flex_header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .flex_item_box {
            padding: 20px;
            // padding-left: 60px;
            display: flex;
            align-items: center;

            width: 18%;
            background: white;
            box-shadow: 0px 6px 20px rgba(25, 25, 26, 0.06), 0px 2px 12px rgba(25, 25, 26, 0.04);
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #e4e7ed;

            img {
                width: 65px;
                height: 65px;
            }

            .p_total {
                margin-left: 80px;
            }

            .p_num {
                margin-bottom: 10px;
                font-size: 35px;
                font-weight: bold;
            }

            .p_text {
                color: #666;
                font-size: 15px;
            }

            .zi {
                color: #6134ff;
            }

            .fen {
                color: #b42add
            }

            .lan {
                color: #22abf9
            }

        }


    }


    .table_content {
        padding: 20px;
        margin-top: 30px;
        box-shadow: 0px 6px 20px rgba(25, 25, 26, 0.06), 0px 2px 12px rgba(25, 25, 26, 0.04);
    }

    .time_header {
        justify-content: space-between;
        display: flex;
        align-items: center;
    }

    .spanm_m {}


    .div-g {
        width: 64px;
        height: 64px;

        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        display: inline-block;
        text-align: center;

        span {
            font-size: 52px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;

            line-height: 64px;
        }
    }

    .div-h {
        width: 64px;
        height: 64px;
        background: linear-gradient(360deg, #fff1f0 0%, #ffd6d1 100%);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        display: inline-block;
        text-align: center;

        span {
            font-size: 52px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #ff4d4f;
            line-height: 64px;
        }
    }

    .div-gH {
        width: 64px;
        height: 64px;
        background: linear-gradient(360deg, #f6ffed 0%, #dbffbe 100%);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        text-align: center;

        span {
            font-size: 52px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #52c41a;
            line-height: 64px;
        }
    }

    .div-hJ {
        width: 64px;
        height: 64px;
        background: linear-gradient(360deg, #fffbe6 0%, #fff8d4 100%);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        text-align: center;

        span {
            font-size: 52px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #faad14;
            line-height: 64px;
        }
    }

    @media (min-width: 768px) {
        .\!md\:mr-4 {
            margin-right: 1rem !important;
        }
    }

    .\!mt-4 {
        margin-top: 0rem !important;
    }

    ::v-deep .el-card.is-always-shadow {
        box-shadow: 0 0 0 var(--el-box-shadow-light);
    }

    .m-2-ling {
        margin-bottom: 1.1rem;
    }

    .font-xm {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 1rem;
    }

    .m-2-input {
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #000000;
        margin-top: -1rem;
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .m-2-span {
        font-size: 10px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #222020;
    }

    .htop {
        margin-bottom: 10px;
    }

    @media screen and (max-width: 1200px) {
        .htop {
            margin-top: 10px;
        }
    }

    @media screen and (max-width: 992px) {
        .htop {
            margin-top: 8px;
        }
    }
    .title_itme{
        cursor: pointer;
    }
</style>